<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步：需要在项目中引入依赖包  vue2.6.14版本，主流的版本 -->
    <!-- 
        vue框架纯纯利用JS实现的没有新的语法都是学过-js
        vue框架对外暴露一个构造函数 【类】 vue构造函数
     -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 第二步：准备容器 -->
    <!-- 准备容器：将来项目效果都是在这个容器中进行展示的 -->
    <!-- id属性：可写可不写 -->
    <div id="root">
            <!-- 第四步 ：展示动态数据:展示VM实例的数据 -->
        <!-- 在使用的时候:直接书写VM实例的属性的名字即可,双大花括号 -->
        <!-- 在容器当中永远不会出现VM实例、永远不会出现this -->
        <h1>你好啊,{{name}},今年{{age}}岁了</h1>
    </div>
</body>
</html>
<script>
    // 第三步：vue依赖包对暴露构造函数vue
    // Vue类的实例一般叫做VM【其他名字也可，但要符合命名规范】
    //在new Vue构造函数的时候需要传递一个【配置对象】
    const VM = new Vue({
        el:'#root',   //el[element元素],右侧需要V一般是字符串类型CSS选择器,它的作用是VM与容器进行关联  
        data:{        //data[数据]，右侧属性值一般是对象，它的作用是给VM添加一些属性
            name:'开心超人',
            age:8,
            sex:'男'
        }
    })
     //VM：Vue类的实例，数据可以和容器进行关联
    //VM实例属性的属性值发生变化，视图上的数据就跟着变化
    //数据变化视图跟着变化，不用关心DOM。
    //注意：VM身上的属性是【响应式数据】，数据发生变化，视图跟这变化！！！
</script>